<script setup lang="ts">
import { ref } from 'vue';
import { getCurrentInstance, navigateBack } from '@tarojs/taro';
import { useEmitter } from '@/hooks/common';

const {
    router: {
        params: { extend }
    }
}: any = getCurrentInstance();

definePageConfig({
    navigationBarTitleText: '发票更多内容'
});
const emitter = useEmitter();

function submit() {
    emitter.$emit('billExtend', JSON.stringify(formData.value));
    navigateBack();
}

const data = extend ? JSON.parse(extend) : '';

const formData = data
    ? ref(data)
    : ref({
        address: '',
        bankName: '',
        bankAccount: '',
        tel: '',
        remark: ''
    });

const ruleForm = ref<any>(null);
</script>
<template>
    <basic-layout>
        <!-- <custom-navbar title="发票更多内容" showLeft /> -->
        <view class="w-375px flex-col-center">
            <view class="w-360px">
                <nut-form ref="ruleForm" class="w-full" :model-value="formData">
                    <nut-form-item label="备注说明" prop="remark">
                        <nut-input v-model="formData.remark" placeholder="请输入备注说明" type="text" />
                    </nut-form-item>
                    <nut-form-item label="地址" prop="address">
                        <nut-input v-model="formData.address" placeholder="请输入地址" type="text" />
                    </nut-form-item>

                    <nut-form-item prop="tel" label="电话">
                        <nut-input v-model="formData.tel" placeholder="请输入电话" type="text" />
                    </nut-form-item>

                    <nut-form-item prop="tel" label="开户银行">
                        <nut-input v-model="formData.bankName" placeholder="请输入开户银行" type="text" />
                    </nut-form-item>
                    <nut-form-item prop="tel" label="银行账号">
                        <nut-input v-model="formData.bankAccount" placeholder="请输入银行账号" type="text" />
                    </nut-form-item>
                    <nut-cell>
                        <basic-button text="确定" class="mt-2" @on-click="submit" />
                    </nut-cell>
                </nut-form>
                <!-- <nut-popup v-model:visible="show" closeable round position="bottom" :style="{ height: '50%' }">
                </nut-popup> -->
            </view>
        </view>
    </basic-layout>
</template>
